<!-- button组件 -->
<template>
  <div class="button" @click="handleClick" :style="zStyle">
    <slot></slot>
  </div>
</template>

<script>
export default {
  name:"zButton",
  components: {},
  props:{
    zStyle:{
      type:Object,
      default:{}
    }
  },
  data() {
    return {

    };
  },
  methods: {
    handleClick: function handleClick(evt) {
      this.$emit('click', evt); // 调用父组件的 click方法并传入事件对象
    }
  }
}
</script>
<style scoped>
.button{
  text-align: center;
  display: inline-block;
  padding: 5px 10px;
  background: var(--blue);
  color: white;
  cursor: pointer;
  user-select:none;
}
.button:hover{
  background: var(--red);
}
</style>